<template>
  <h1>图表展示</h1>
  <div ref="showDiv" class="showDiv"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { onMounted, ref } from 'vue';
const showDiv = ref(null)
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
const option = ref('')
// 引入axios
import axios from 'axios'
onMounted(async () => {
  // 确保在组件挂载后再初始化 ECharts
  if (showDiv.value) {
    const myChart = echarts.init(showDiv.value);
    const response = await axios.get('/api/echart');
    option.value = response.data;
    // const option = {
    //   title: {
    //     text: 'Referer of a Website',
    //     subtext: 'Fake Data',
    //     left: 'center'
    //   },
    //   tooltip: {
    //     trigger: 'item'
    //   },
    //   legend: {
    //     orient: 'vertical',
    //     left: 'left'
    //   },
    //   series: [
    //     {
    //       name: 'Access From',
    //       type: 'pie',
    //       radius: '50%',
    //       data: [
    //         { value: 1048, name: 'Search Engine' },
    //         { value: 735, name: 'Direct' },
    //         { value: 580, name: 'Email' },
    //         { value: 484, name: 'Union Ads' },
    //         { value: 300, name: 'Video Ads' }
    //       ],
    //       emphasis: {
    //         itemStyle: {
    //           shadowBlur: 10,
    //           shadowOffsetX: 0,
    //           shadowColor: 'rgba(0, 0, 0, 0.5)'
    //         }
    //       }
    //     }
    //   ]
    // };

    myChart.setOption(option.value);
  }
});

</script>

<style scoped>
.showDiv {
  width: 600px;
  height: 400px;
}
</style>